import { createAnimate } from "./animate.js";

function $(selector) {
    return document.querySelector(selector);
}

let curIndex = 0;  // 当前显示的是第几张图片
let doms = {
    container: $('.carousel-container'),
    carouselList: $('.carousel-list'),
    indicator: $('.indicator'),
    arrowLeft: $('.arrow-left'),
    arrowRight: $('.arrow-right')
}
let contanerWidth = doms.container.clientWidth;

let urls = [
    './imgs/img1.png',
    './imgs/img2.png',
    './imgs/img3.png',
    './imgs/img4.png',
    './imgs/img5.png',
];  // 记录了要显示的所有轮播图的路径

function init() {
    function _createImg(url) {
        let img = document.createElement('img');
        img.src = url;
        img.className = 'carousel-item';
        doms.carouselList.appendChild(img);
    }
    for (let i = 0; i < urls.length; i++) {
        let url = urls[i];
        _createImg(url);
        let div = document.createElement('div');
        div.className = 'indicator-item';
        doms.indicator.appendChild(div);
    }

    _createImg(urls[0]);
    doms.carouselList.style.width = `${doms.carouselList.children.length}00%`;
    setIndicatorStatus();

}

// 根据currentIndex设置指示器的状态
function setIndicatorStatus() {
    let active = $('.indicator-item.active');
    if (active) {
        active.className = 'indicator-item'
    }

    let index = curIndex % urls.length;

    doms.indicator.children[index] && doms.indicator.children[index].classList.add('active');
}

init();

// 交互
let totalMS = 500;
let isPlaying = false;
function moveTo(newIndex, onend) {
    if (isPlaying || curIndex === newIndex) return;
    isPlaying = true;
    let from = parseFloat(doms.carouselList.style.marginLeft) || 0;
    let to = -newIndex * contanerWidth;
    createAnimate({
        from,
        to,
        totalMS,
        onMove: function (n) {
            doms.carouselList.style.marginLeft = n + 'px';
        },
        onEnd() {
            isPlaying = false;
            onend && onend();
        }
    });
    curIndex = newIndex;
    setIndicatorStatus();
}

// 处理指示器的点击事件
for (let i = 0; i < doms.indicator.children.length; i++) {
    doms.indicator.children[i].onclick = function () {
        moveTo(i);
    }
}

function next() {
    let newIndex = curIndex + 1;
    let onend;
    console.log(newIndex, doms.carouselList.children.length - 1)
    if (newIndex === doms.carouselList.children.length - 1) {
        onend = function () {
            requestAnimationFrame(() => {
                doms.carouselList.style.marginLeft = 0 + 'px';
                curIndex = 0;
            })

        }
    }
    moveTo(newIndex, onend);

}



function prev() {
    let newIndex = curIndex - 1;
    if (newIndex < 0) {
        console.log('进判断了')
        let maxIndex = doms.carouselList.children.length - 1;
        doms.carouselList.style.marginLeft = -maxIndex * contanerWidth + 'px';
        newIndex = maxIndex - 1;
        curIndex = maxIndex; // 更新当前索引

    }
    moveTo(newIndex);
}

doms.arrowRight.onclick = next;
doms.arrowLeft.onclick = prev;